<template>
  <MesBox :title="title" v-model="visible" :width="1200" :height="600">
    <MesHeader :title="headerTitle" v-if="showHeader">
      <template #default>
        <div style="text-align: right; padding-top: 4px">
          <el-button size="small" link class="textColor" @click="addRow"
            ><i class="el-icon-plus" style="margin-right: 5px"></i
            >添加行</el-button
          >
          <el-button size="small" link class="textColor" @click="delRow"
            ><i class="el-icon-delete" style="margin-right: 5px"></i
            >删除行</el-button
          >
          <!-- <el-button size="small" link class="textColor" @click="importTable"
            ><i class="el-icon-upload2" style="margin-right: 5px"></i
            >导入</el-button
          >
          <el-button
            size="small"
            link
            class="textColor"
            @click="exportTable"
            v-if="curAction != 'add'"
            ><i class="el-icon-download" style="margin-right: 5px"></i
            >导出</el-button
          >
          <el-button
            size="small"
            link
            class="textColor"
            @click="refresh"
            v-if="curAction != 'add'"
            ><i class="el-icon-refresh" style="margin-right: 5px"></i
            >刷新</el-button
          > -->
        </div>
      </template>
    </MesHeader>
    <MesTable
      ref="table"
      :columns="columns"
      :tableData="tableData"
      :clickEdit="true"
      :index="true"
    ></MesTable>
    <template #footer>
      <el-button type="danger" @click="save">
        <i class="el-icon-success"></i>
        保存
      </el-button>
    </template>
  </MesBox>
</template>

<script setup>
import { ref } from 'vue'
import MesBox from '@/components/basic/MesBox'
import MesTable from '@/components/basic/MesTable'
import MesHeader from '@/components/basic/MesHeader'

defineEmits(['parentCall'])
const visible = ref(false)
const table = ref(null)
let title = ref('')
let headerTitle = ref('')
let showHeader = ref(false)
let columns = []
let tableData = ref([])
let saveFunc = null
let save = async () => {
  let flag = await saveFunc(tableData.value)
  if (flag) {
    visible.value = false
    columns = []
    tableData.value = []
    title.value = ''
  }
}

const open = ({
  Title = '',
  Columns = [],
  TableData = [],
  SaveFun = () => {},
  HeaderTitle = '',
  ShowHeader = false,
}) => {
  title.value = Title
  headerTitle.value = HeaderTitle
  showHeader.value = ShowHeader
  Object.assign(columns, Columns)
  Object.assign(tableData.value, TableData)
  saveFunc = SaveFun
  visible.value = true
}

const addRow = () => {
  table.value.tableData.push({})
}

const delRow = () => {
  table.value.delRow()
}

const getTableData = () => {
  return table.value.tableData
}

defineExpose({ open, getTableData})
</script>

<style lang="less" scoped></style>
